<template>
  <div>
    <div class="container clearfix">
      
      <div class="chat">
        <div class="chat-header clearfix">
          <n-flex justify="space-between" align="center">
            <div>
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
              <div class="chat-about">
                <div class="chat-with">Chat with Vincent Porter</div>
                <div class="chat-num-messages">already 1 902 messages</div>
              </div>
            </div>
            <div>
              <n-icon size="40" @click="backToIndex">
                <Close />
              </n-icon>
            </div>
          </n-flex>
        </div>
        <!-- end chat-header -->
        
        <div class="chat-history" ref="chatHistoryRef" :style="{ height: winHeight - 155 + 'px' }">
          <ul>
            
            <template v-for="(item, index) in conversision" :key="index">
              <li class="clearfix" v-if="item.isOwn">
                <div class="message-data align-right">
                  <span class="message-data-time" >{{ item.time }}</span> &nbsp; &nbsp;
                  <span class="message-data-name" >{{ item.name }}</span> <i class="fa fa-circle me"></i>
                  
                </div>
                <div class="message other-message float-right">
                  {{ item.content }}
                </div>
              </li>
              
              <li v-else>
                <div class="message-data">
                  <span class="message-data-name"><i class="fa fa-circle online"></i> {{ item.name }}</span>
                  <span class="message-data-time">{{ item.time }}</span>
                </div>
                <div class="message my-message">
                  {{ item.content }}
                </div>
              </li>
            </template>
            
          </ul>
          
        </div> <!-- end chat-history -->
        
        <div class="chat-message clearfix">
          <textarea
            name="message-to-send"
            v-model="message"
            placeholder="Type your message"
            rows="1"
            @keydown.enter.prevent="sendMsg"
            enterkeyhint="send"
          ></textarea>
          <!-- <button @click="sendMsg">Send</button> -->

        </div> <!-- end chat-message -->
        
      </div> <!-- end chat -->
      
    </div> <!-- end container -->

  </div>
</template>

<script>
import { Close } from '@vicons/ionicons5'
export default {
  data() {
    return {
      conversision: [
        {
          time: '10:10 AM, Today',
          name: 'Olia',
          content: 'Hi Vincent, how are you? How is the project coming along?',
          isOwn: true
        },
        {
          name: 'Vincent',
          time: '10:12 AM, Today',
          content: 'Are we meeting today? Project has been already finished and I have results to show you.',
          isOwn: false
        },
        {
          time: '10:14 AM, Today',
          name: 'Olia',
          content: 'Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?',
          isOwn: true
        },
        {
          name: 'Vincent',
          time: '10:20 AM, Today',
          content: "Actually everything was fine. I'm very excited to show this to our team.123",
          isOwn: false
        },
      ],
      message: '',
      searchVal: ''
    }
  },
  components: { Close },
  computed: {
    winHeight() {
      return document.documentElement.clientHeight
    }
  },
  mounted() {
    
  },
  methods: {
    sendMsg() {
      if (!this.message) return;
      this.conversision.push({
        name: 'Olia',
        time: '10:22 AM, Today',
        content: this.message,
        isOwn: true
      })
      this.message = '';
      this.$nextTick(() => {
        const chatHistoryEl = this.$refs.chatHistoryRef;
        chatHistoryEl.scrollTop = chatHistoryEl.scrollHeight;
      });
    },
    backToIndex() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

$green: #86BB71;
$blue: #94C2ED;
$orange: #E38968;
$gray: #92959E;

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #C5DDEB;
  font: 14px/20px "Lato", Arial, sans-serif;
  padding: 40px 0;
  color: white;
}

ul {
  padding-left: 10px;
}

.container {
  margin: 0 auto;
  width: 100%;
  background: #444753;
  border-radius: 5px;
}

.chat {
  width: 100%;
  background: #F2F5F8;
  
  color: #434651;
  
  .chat-header {
    padding: 10px;
    border-bottom: 2px solid white;
    
    img {
      float: left;
    }
    
    .chat-about {
      float: left;
      padding-left: 10px;
      margin-top: 6px;
    }
    
    .chat-with {
      font-weight: bold;
      font-size: 16px;
    }
    
    .chat-num-messages {
      color: $gray;
      font-size: 12px;
    }
    
    .fa-star {
      float: right;
      color: #D8DADF;
      font-size: 20px;
      margin-top: 12px;
    }
  }
  
  .chat-history {
    padding: 15px 15px 10px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    
    .message-data {
      margin-bottom: 15px;
      font-size: 12px;
    }
    
    .message-data-time {
      padding-left: 6px;
    }
    
    .message {      
      color: white;
      padding: 18px 20px;
      line-height: 26px;
      font-size: 16px;
      border-radius: 7px;
      margin-bottom: 15px;
      width: 90%;
      position: relative;
      
      &:after {
        bottom: 100%;
        left: 7%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-bottom-color: $green;
        border-width: 10px;
        margin-left: -10px;
      }
    }
    
    .my-message {
      background: $green;
    }
    
    .other-message {
      background: $blue;
      
      &:after {
        border-bottom-color: $blue;
        left: 93%;
      }
    }
    
  }
  
  .chat-message {
    padding: 15px;
    
    textarea {
      width: 100%;
      border: none;
      padding: 10px 20px;
      font: 14px/22px "Lato", Arial, sans-serif;
      border-radius: 5px;
      resize: none;
      
    }
    
    .fa-file-o, .fa-file-image-o {
      font-size: 16px;
      color: gray;
      cursor: pointer;
      
    }
    
    button {
      float: right;
      color: $blue;
      font-size: 16px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      font-weight: bold;
      background: #F2F5F8;
      
      &:hover {
        color: darken($blue, 7%);
      }
    }
  }
}

.online, .offline, .me {
    margin-right: 3px;
    font-size: 10px;
  }
  
.online {
  color: $green;
}
  
.offline {
  color: $orange;
}

.me {
  color: $blue;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.float-right {
  float: right;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


</style>